<template>
	<div class="main-content">
		<!-- banner -->
		<div class="banner">
			<my-swiper 
				:imgList="imgList"
				:loop="banner.loop"
				:autoplay="banner.autoplay"
				:dots="banner.dots"
			></my-swiper>
		</div>
		<!-- banner end -->
		<!-- m-fq01 -->
		<div class="m-box m-fq01">
			<ul class="ul-fq01">
				<li
					v-for="item of toolList"
					:key="item.id"
				>
					<div class="inner">
						<div class="pic">
							<img :src="item.img" alt="">
						</div>
						<h3>{{item.title}}</h3>
					</div>
				</li>
			</ul>
		</div>
		<!-- m-fq01 end -->
		<!-- m-fq02 -->
		<div class="m-box m-fq02">
			<ul class="ul-fq02">
				<li
					class="item-active"
					v-for="item of productList"
					:key="item.id"
					@click="goPath(item.url)"
				>
					<div class="wp">
						<div class="pic">
							<img :src="item.img" alt="">
						</div>
						<div class="txt">
							<h3>{{item.title}}</h3>
							<div class="desc">
								<p>{{item.desc}}</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!-- m-fq02 end -->

	</div>
</template>

<script>
	import mySwiper from '@/components/mySwiper.vue'
	export default {
		components: { 
			mySwiper
		},
		data() {
			return {
				title: '首页',
				banner: {
					loop: true,
					autoplay: true,
					dots: false
				},
				imgList: [
					{
						id: 'id01',
						img: this.utils.loadImage('ban1-p01.jpg'),
					},
					{
						id: 'id02',
						img: this.utils.loadImage('ban1-p01.jpg')
					},
					{
						id: 'id03',
						img: this.utils.loadImage('ban1-p01.jpg')
					}
				],
				toolList: [
					{
						id: 'id01',
						img: this.utils.loadImage('ico-g-1-on.png'),
						title: '工具1',
					},
					{
						id: 'id02',
						img: this.utils.loadImage('ico-g-2-on.png'),
						title: '工具2',
						url:　''
					},
					{
						id: 'id03',
						img: this.utils.loadImage('ico-g-3-on.png'),
						title: '工具3',
						url:　''
					},
					{
						id: 'id04',
						img: this.utils.loadImage('ico-g-4-on.png'),
						title: '工具4',
						url:　''
					},
					{
						id: 'id05',
						img: this.utils.loadImage('ico-g-1-on.png'),
						title: '工具5',
						url:　''
					},
					{
						id: 'id06',
						img: this.utils.loadImage('ico-g-2-on.png'),
						title: '工具6',
						url:　''
					},
					{
						id: 'id07',
						img: this.utils.loadImage('ico-g-3-on.png'),
						title: '工具7',
						url:　''
					},
					{
						id: 'id08',
						img: this.utils.loadImage('ico-g-4-on.png'),
						title: '工具8',
						url:　''
					}
				],
				productList: [
					{
						id: 'id01',
						img: this.utils.loadImage('f4-p01.jpg'),
						title: '工具1',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　{
							name: 'ProductDetail',
							params: {
								title: '产品详情',
								id: 'id01'
							}
						}
					},
					{
						id: 'id02',
						img: this.utils.loadImage('f4-p02.jpg'),
						title: '工具2',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					},
					{
						id: 'id03',
						img: this.utils.loadImage('f4-p03.jpg'),
						title: '工具3',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					},
					{
						id: 'id04',
						img: this.utils.loadImage('f4-p04.jpg'),
						title: '工具4',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					},
					{
						id: 'id05',
						img: this.utils.loadImage('f4-p01.jpg'),
						title: '工具5',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					},
					{
						id: 'id06',
						img: this.utils.loadImage('f4-p01.jpg'),
						title: '工具6',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					},
					{
						id: 'id07',
						img: this.utils.loadImage('f4-p01.jpg'),
						title: '工具7',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					},
					{
						id: 'id08',
						img: this.utils.loadImage('f4-p01.jpg'),
						title: '工具8',
						desc: '产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情',
						url:　''
					}
				]
			}
		},
		created() {
			this.getData();
		},
		methods: {
			// 请求数据
			getData() {
				// this.axios({
				// 	url: this.webUrl.base + 
				// })
				// .then(res => {
				// 	console.log(res);
				// });
			},
			goPath(path) {
				this.$router.push(path);
			},
		}
	}
</script>

<style>
</style>
